<template>
	<view>
		<!-- 验车照片 -->
		<view class="boxContrainer">
			<view class="photoBox" v-if="urls1.length > 0">
				<view class="checkTitle">车身照片</view>
				<u-album :urls="urls1" singleSize="100" multipleSize="100"></u-album>
			</view>
			<view class="photoBox" v-if="urls2.length > 0">
				<view class="checkTitle">车辆划痕</view>
				<u-album :urls="urls2" singleSize="100" multipleSize="100"></u-album>
			</view>
			<view class="photoBox" v-if="urls3.length > 0">
				<view class="checkTitle">内饰照片</view>
				<u-album :urls="urls3" singleSize="100" multipleSize="100"></u-album>
			</view>
			<view class="photoBox" v-if="urls4.length > 0">
				<view class="checkTitle">仪表盘</view>
				<u-album :urls="urls4" singleSize="100" multipleSize="100"></u-album>
			</view>
			<view class="photoBox" v-if="urls5.length > 0">
				<view class="checkTitle">验车视频</view>
				<video style="width: 200rpx;height: 200rpx;" :src="urls5"></video>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import settings from '@/settings.js';
	export default {
		data() {
			return {
				type : 1, //1交车 2还车
				bodyImage :[],
				panelImage : [],
				interiorImage : [],
				scratchImage : [],
				videoUrls : []
				
			}
		},
		computed: {
			// 车身照片
			urls1(){
				if(!this.$u.test.isEmpty(this.bodyImage)) {
					return this.getPathOfUrl(this.bodyImage);
				}else {
					return [];
				}
			},
			// 车辆划痕
			urls2() {
				if(!this.$u.test.isEmpty(this.scratchImage)) {
					return this.getPathOfUrl(this.scratchImage);
				}else {
					return [];
				}
			},
			// 内饰照片
			urls3() {
				if(!this.$u.test.isEmpty(this.interiorImage)) {
					return this.getPathOfUrl(this.interiorImage);
				}else {
					return [];
				}
			},
			// 仪表盘照片
			urls4() {
				if(!this.$u.test.isEmpty(this.panelImage)) {
					return this.getPathOfUrl(this.panelImage);
				}else {
					return [];
				}
			},
			// 验车视频
			urls5() {
				if(!this.$u.test.isEmpty(this.videoUrls)) {
					return this.getPathOfUrl(this.videoUrls)[0];
				}else {
					return [];
				}
			}
			
		},
		
		onLoad(op) {
			const params = JSON.parse(decodeURIComponent(op.params));
			this.type =params.type;
			this.bodyImage = params.bodyImage;
			this.panelImage = params.panelImage;
			this.interiorImage = params.interiorImage;
			this.scratchImage = params.scratchImage;
			this.videoUrls = params.videoUrls;
			uni.setNavigationBarTitle({
				title: this.type == 1 ? '交车验车照片' : '还车验车照片'
			})
			
		},
		methods: {
           //将图片路径转换为Url;
           getPathOfUrl(paths) {
           	var result = [];
           	if(paths != null) {
           		for (let path of paths) {
           			let url = settings.baseImageUrl + path;
           			result.push(url);
           		}
           	}
           	return result;
           }
		}
	}
</script>

<style lang="scss" scoped>
	.photoBox {
		padding: 20rpx 0 0;
		.checkTitle {
			font-weight: bold;
			font-size: 28rpx;
			color: #333;
			margin: 20rpx 0;
			&::before {
				content: '';
				display: inline-block;
				position: relative;
				top: 2rpx;
				width: 8rpx;
				height: 24rpx;
				background: #2879FF;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}
		}
	}
	
</style>